{{ template "header.html" . }}

<div class="content">
  <h2 class="content-title">
    {{ if eq (extra "lang") "en" }}
      Change Password
    {{ else }}
      Смена пароля
    {{ end }}
  </h2>

  {{ if .ChangeReason.WeakComplexity }}
  <div class="password-change-notice">
    <div class="notice-message">
      <span class="notice-icon">
        <i class="fas fa-exclamation-circle"></i>
      </span>
      <span class="notice-text">
        {{ if eq (extra "lang") "en" }}
          Initiator: <strong>password complexity policy</strong>
        {{ else }}
          Инициатор: <strong>политика сложности паролей</strong>
        {{ end }}
      </span>
    </div>
  </div>
  {{ else if .ChangeReason.Rotation }}
  <div class="password-change-notice">
    <div class="notice-message">
      <span class="notice-icon">
        <i class="fas fa-history"></i>
      </span>
      <span class="notice-text">
        {{ if eq (extra "lang") "en" }}
          Initiator: <strong>password rotation policy</strong>
        {{ else }}
          Инициатор: <strong>политика ротации паролей</strong>
        {{ end }}
      </span>
    </div>
  </div>
  {{ end }}

  {{ if .Error.Exists }}
  <div class="error-notification mb-4">
    <div class="error-content">
      {{ if .Error.List.CurrentPasswordInvalid }}
        <div class="error-message">
          <svg class="error-icon" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
          </svg>
            {{ if eq (extra "lang") "en" }}
              Current password is incorrect
            {{ else }}
              Неверный текущий пароль
            {{ end }}
        </div>
      {{ else if .Error.List.PasswordTooWeak.Exists }}
        <div class="error-message">
          <svg class="error-icon" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
          </svg>
            {{ if eq (extra "lang") "en" }}
              Password doesn't meet requirements: {{ .Error.List.PasswordTooWeak.Description }}
            {{ else }}
              Пароль не соответствует требованиям: {{ .Error.List.PasswordTooWeak.Description }}
            {{ end }}
        </div>
      {{ else if .Error.List.OldAndNewPassAreEqual }}
        <div class="error-message">
          <svg class="error-icon" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
          </svg>
            {{ if eq (extra "lang") "en" }}
              Current and new password cannot be equal
            {{ else }}
              Новый пароль должен отличаться от текущего
            {{ end }}
        </div>
      {{ else if .Error.List.ReusedPassword }}
        <div class="error-message">
          <svg class="error-icon" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
          </svg>
            {{ if eq (extra "lang") "en" }}
              Cannot use previously used password
            {{ else }}
              Нельзя использовать предыдущие пароли
            {{ end }}
        </div>
      {{ else }}
        <div class="error-message">
          <svg class="error-icon" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
          </svg>
            {{ if eq (extra "lang") "en" }}
              Failed to change password
            {{ else }}
              Ошибка при смене пароля
            {{ end }}
        </div>
      {{ end }}
    </div>
  </div>
  {{ end }}
  
  <form method="post" action="{{ .ReqPath }}" class="grid">
    <div class="input-group">
      <label for="username" class="input-label">
        <span class="label-text">{{ if eq (extra "lang") "en" }}Username{{ else }}Имя пользователя{{ end }}</span>
      </label>
      <div class="input-wrapper">
        <input type="text" id="username" name="username" 
              value="{{ .Username }}" readonly
              class="input disabled-field pl-10">
        <div class="input-icon">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
            <path fill-rule="evenodd" d="M12 1.5a5.25 5.25 0 00-5.25 5.25v3a3 3 0 00-3 3v6.75a3 3 0 003 3h10.5a3 3 0 003-3v-6.75a3 3 0 00-3-3v-3c0-2.9-2.35-5.25-5.25-5.25zm3.75 8.25v-3a3.75 3.75 0 10-7.5 0v3h7.5z" clip-rule="evenodd"/>
          </svg>
        </div>
      </div>
    </div>

    <div class="input-group">
      <label for="currentPassword" class="input-label">
        <span class="label-text">{{ if eq (extra "lang") "en" }}Current Password{{ else }}Текущий пароль{{ end }}</span>
      </label>
      <div class="input-wrapper">
        <input tabindex="1" required id="currentPassword" name="currentPassword" 
              type="password" class="input" 
              placeholder="{{ if eq (extra "lang") "en" }}Enter current password{{ else }}Введите текущий пароль{{ end }}"
              {{ if .Error.Exists }}autofocus{{ end }}>
        <button type="button" class="password-toggle" aria-label="Toggle password visibility">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M10 4.16667C3.33333 4.16667 0.833333 10 0.833333 10C0.833333 10 3.33333 15.8333 10 15.8333C16.6667 15.8333 19.1667 10 19.1667 10C19.1667 10 16.6667 4.16667 10 4.16667ZM10 13.75C7.93333 13.75 6.25 12.0667 6.25 10C6.25 7.93333 7.93333 6.25 10 6.25C12.0667 6.25 13.75 7.93333 13.75 10C13.75 12.0667 12.0667 13.75 10 13.75Z" fill="#64748B"/>
            <path d="M10 7.08333C8.85 7.08333 7.91667 8.01667 7.91667 9.16667C7.91667 10.3167 8.85 11.25 10 11.25C11.15 11.25 12.0833 10.3167 12.0833 9.16667C12.0833 8.01667 11.15 7.08333 10 7.08333Z" fill="#64748B"/>
          </svg>
        </button>
      </div>
    </div>

    <div class="input-group">
      <label for="newPassword" class="input-label">
        <span class="label-text">{{ if eq (extra "lang") "en" }}New Password{{ else }}Новый пароль{{ end }}</span>
      </label>
      <div class="input-wrapper">
        <input tabindex="2" required id="newPassword" name="newPassword" 
              type="password" class="input"
              placeholder="{{ if eq (extra "lang") "en" }}Enter new password{{ else }}Введите новый пароль{{ end }}">
        <button type="button" class="password-toggle" aria-label="Toggle password visibility">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M10 4.16667C3.33333 4.16667 0.833333 10 0.833333 10C0.833333 10 3.33333 15.8333 10 15.8333C16.6667 15.8333 19.1667 10 19.1667 10C19.1667 10 16.6667 4.16667 10 4.16667ZM10 13.75C7.93333 13.75 6.25 12.0667 6.25 10C6.25 7.93333 7.93333 6.25 10 6.25C12.0667 6.25 13.75 7.93333 13.75 10C13.75 12.0667 12.0667 13.75 10 13.75Z" fill="#64748B"/>
            <path d="M10 7.08333C8.85 7.08333 7.91667 8.01667 7.91667 9.16667C7.91667 10.3167 8.85 11.25 10 11.25C11.15 11.25 12.0833 10.3167 12.0833 9.16667C12.0833 8.01667 11.15 7.08333 10 7.08333Z" fill="#64748B"/>
          </svg>
        </button>
      </div>
      {{ if .PasswordPolicy }}
        <div class="password-hint">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M8 1.33333C4.32 1.33333 1.33333 4.32 1.33333 8C1.33333 11.68 4.32 14.6667 8 14.6667C11.68 14.6667 14.6667 11.68 14.6667 8C14.6667 4.32 11.68 1.33333 8 1.33333ZM8 13.3333C5.06 13.3333 2.66667 10.94 2.66667 8C2.66667 5.06 5.06 2.66667 8 2.66667C10.94 2.66667 13.3333 5.06 13.3333 8C13.3333 10.94 10.94 13.3333 8 13.3333Z" fill="#64748B"/>
            <path d="M8 6C7.63333 6 7.33333 6.3 7.33333 6.66667V9.33333C7.33333 9.7 7.63333 10 8 10C8.36667 10 8.66667 9.7 8.66667 9.33333V6.66667C8.66667 6.3 8.36667 6 8 6Z" fill="#64748B"/>
            <path d="M8.66667 4.66667C8.66667 5.03333 8.36667 5.33333 8 5.33333C7.63333 5.33333 7.33333 5.03333 7.33333 4.66667C7.33333 4.3 7.63333 4 8 4C8.36667 4 8.66667 4.3 8.66667 4.66667Z" fill="#64748B"/>
          </svg>
          <span class="hint-text">
            {{ .PasswordPolicy.ComplexityRequirements }}
          </span>
        </div>
        {{ end }}
    </div>

    <div class="input-group">
      <label for="confirmPassword" class="input-label">
        <span class="label-text">{{ if eq (extra "lang") "en" }}Confirm Password{{ else }}Подтвердите пароль{{ end }}</span>
      </label>
      <div class="input-wrapper">
        <input tabindex="3" required id="confirmPassword" name="confirmPassword" 
              type="password" class="input"
              placeholder="{{ if eq (extra "lang") "en" }}Confirm new password{{ else }}Подтвердите новый пароль{{ end }}">
        <button type="button" class="password-toggle" aria-label="Toggle password visibility">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M10 4.16667C3.33333 4.16667 0.833333 10 0.833333 10C0.833333 10 3.33333 15.8333 10 15.8333C16.6667 15.8333 19.1667 10 19.1667 10C19.1667 10 16.6667 4.16667 10 4.16667ZM10 13.75C7.93333 13.75 6.25 12.0667 6.25 10C6.25 7.93333 7.93333 6.25 10 6.25C12.0667 6.25 13.75 7.93333 13.75 10C13.75 12.0667 12.0667 13.75 10 13.75Z" fill="#64748B"/>
            <path d="M10 7.08333C8.85 7.08333 7.91667 8.01667 7.91667 9.16667C7.91667 10.3167 8.85 11.25 10 11.25C11.15 11.25 12.0833 10.3167 12.0833 9.16667C12.0833 8.01667 11.15 7.08333 10 7.08333Z" fill="#64748B"/>
          </svg>
        </button>
      </div>
    </div>

    <button type="submit" id="submit-change" class="btn btn-primary">
      {{ if eq (extra "lang") "en" }}Change Password{{ else }}Сменить пароль{{ end }}
      <img src="{{ url $.ReqPath "static/img/next-icon.svg" }}" />
    </button>
  </form>
</div>

<style>
.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.disabled-field {
  background-color: #f5f5f5;
  color: #777;
  cursor: not-allowed;
  border-color: #ddd;
}

.input-group {
  margin-bottom: 1.5rem;
}
.input-icon {
  position: absolute;
  right: 3rem;
  display: flex;
  color: #64748B;
}
.password-change-notice {
  background-color: #fff9e6;
  border-left: 4px solid #ffd700;
  border-radius: 4px;
  padding: 12px 15px;
  margin: 0 0 20px 0;
  font-size: 0.95em;
}

.notice-message {
  display: flex;
  align-items: center;
  min-height: 24px;
}

.notice-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: 10px;
  color: #b38f00;
  font-size: 1.2em;
}

.notice-text {
  line-height: 1.4;
  color: #5a4a00;
}

.notice-text strong {
  color: #3d2c00;
  font-weight: 600;
}

.password-toggle {
  position: absolute;
  right: 3rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #64748B;
}

.password-hint {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.5rem;
  color: #64748b;
  font-size: 0.875rem;
}

.hint-text {
  white-space: pre-line;
  word-break: break-word;
}

.password-hint svg {
  margin-right: 0.5rem;
  flex-shrink: 0;
}

.error-notification {
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 0.375rem;
  padding: 1rem;
  color: #b91c1c;
}

.error-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.error-message {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  line-height: 1.5;
}

.error-icon {
  flex-shrink: 0;
  width: 1.25rem; /* 20px */
  height: 1.25rem;
  margin-top: 0.125rem;
}

</style>

<script>
  document.querySelectorAll('.password-toggle').forEach(button => {
  button.addEventListener('click', (e) => {
    const input = e.currentTarget.closest('.input-wrapper').querySelector('input');
    const isPassword = input.type === 'password';
    
    input.type = isPassword ? 'text' : 'password';
    e.currentTarget.innerHTML = isPassword ? 
      `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M2.5 2.5L17.5 17.5" stroke="#64748B" stroke-width="2" stroke-linecap="round"/>
        <path d="M9.584 9.587C9.204 9.966 8.99933 10.491 9 11.042C9 12.129 9.871 13 10.958 13C11.509 13 12.034 12.795 12.413 12.415" stroke="#64748B" stroke-width="2" stroke-linecap="round"/>
        <path d="M5.1 5.104C3.403 6.058 2.03 7.454 1 9.167C2.667 12.5 6.333 15.833 10 15.833C11.52 15.833 12.98 15.383 14.3 14.7" stroke="#64748B" stroke-width="2" stroke-linecap="round"/>
        <path d="M10 4.16667C12.058 4.16667 14.025 4.99167 15.7 6.3L18.333 3.66667" stroke="#64748B" stroke-width="2" stroke-linecap="round"/>
        <path d="M10 7.08333C11.15 7.08333 12.0833 8.01667 12.0833 9.16667C12.0833 9.7 11.9 10.192 11.592 10.592" stroke="#64748B" stroke-width="2" stroke-linecap="round"/>
      </svg>` : 
      `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M10 4.16667C3.33333 4.16667 0.833333 10 0.833333 10C0.833333 10 3.33333 15.8333 10 15.8333C16.6667 15.8333 19.1667 10 19.1667 10C19.1667 10 16.6667 4.16667 10 4.16667ZM10 13.75C7.93333 13.75 6.25 12.0667 6.25 10C6.25 7.93333 7.93333 6.25 10 6.25C12.0667 6.25 13.75 7.93333 13.75 10C13.75 12.0667 12.0667 13.75 10 13.75Z" fill="#64748B"/>
        <path d="M10 7.08333C8.85 7.08333 7.91667 8.01667 7.91667 9.16667C7.91667 10.3167 8.85 11.25 10 11.25C11.15 11.25 12.0833 10.3167 12.0833 9.16667C12.0833 8.01667 11.15 7.08333 10 7.08333Z" fill="#64748B"/>
      </svg>`;
  });
});
document.querySelector('form').addEventListener('submit', function(e) {
  const submitBtn = document.getElementById('submit-change');
  const originalText = submitBtn.textContent;
  
  // Disable button during submission
  submitBtn.disabled = true;
  submitBtn.textContent = '{{ if eq (extra "lang") "en" }}Processing...{{ else }}Обработка...{{ end }}';

  // Add URL params as hidden inputs
  const urlParams = new URLSearchParams(window.location.search);
  urlParams.forEach((value, key) => {
    const input = document.createElement('input');
    input.type = 'hidden';
    input.name = key;
    input.value = value;
    this.appendChild(input);
  });

  // Client-side validation
  const newPass = document.getElementById('newPassword').value;
  const confirmPass = document.getElementById('confirmPassword').value;
  
  if (newPass !== confirmPass) {
    e.preventDefault();
    submitBtn.disabled = false;
    submitBtn.textContent = originalText;
    alert('{{ if eq (extra "lang") "en" }}Passwords do not match{{ else }}Пароли не совпадают{{ end }}');
    return;
  }
});

// Restore button state if form submission fails
window.addEventListener('unload', function() {
  const submitBtn = document.getElementById('submit-change');
  if (submitBtn.disabled) {
    submitBtn.disabled = false;
    submitBtn.textContent = '{{ if eq (extra "lang") "en" }}Change Password{{ else }}Сменить пароль{{ end }}';
  }
});
</script>

{{ template "footer.html" . }}